
<template>
	<HeadMenu />
	<Banner />

	<div class="item1">
		<span class="title">档期查询</span>
		<p>Schedule inquiry</p>

		<div class="item1_list">
			<ul>

				<li>
					<el-select v-model="value" placeholder="请选择">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</li>
				<li>
					<el-select v-model="value" placeholder="主持人分类">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</li>
				<li>
					<el-select v-model="value" placeholder="请选择">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</li>
				<li>
					<el-select v-model="value" placeholder="请选择">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</li>
				<li style="width:70px"><button class="btn2"></button></li>
			</ul>
		</div>
	</div>
	<div class="item2">
		<span class="title">摄影推荐</span>
		<p>Photography Recommendation</p>

		<div class="recommendlist">
			<div class="item">
				<div class="grid-item">
					<div class="imgbox">
						<img src="../../assets/images/pic1.png" />
					</div>
					<div class="float1"></div>
					<div class="float2">

						<div class="infor_l">
							<div class="smallpic">
								<img src="../../assets/images/yuan.png" />
							</div>
							<div class="name">蔓延摄像</div>
							<div class="classification">
								<ul>
									<li>文艺</li>
									<li>记录</li>
									<li>电影感</li>
								</ul>
							</div>
						</div>
						<div class="infor_r">
							<span class="small">￥</span>1660
						</div>

					</div>
				</div>
				<a class="reserve">点击预定</a>
			</div>
			<div class="item">
				<div class="grid-item">
					<div class="imgbox">
						<img src="../../assets/images/pic1.png" />
					</div>
					<div class="float1"></div>
					<div class="float2">

						<div class="infor_l">
							<div class="smallpic">
								<img src="../../assets/images/yuan.png" />
							</div>
							<div class="name">蔓延摄像</div>
							<div class="classification">
								<ul>
									<li>文艺</li>
									<li>记录</li>
									<li>电影感</li>
								</ul>
							</div>
						</div>
						<div class="infor_r">
							<span class="small">￥</span>1660
						</div>

					</div>
				</div>
				<a class="reserve">点击预定</a>
			</div>
			<div class="item">
				<div class="grid-item">
					<div class="imgbox">
						<img src="../../assets/images/pic1.png" />
					</div>
					<div class="float1"></div>
					<div class="float2">

						<div class="infor_l">
							<div class="smallpic">
								<img src="../../assets/images/yuan.png" />
							</div>
							<div class="name">蔓延摄像</div>
							<div class="classification">
								<ul>
									<li>文艺</li>
									<li>记录</li>
									<li>电影感</li>
								</ul>
							</div>
						</div>
						<div class="infor_r">
							<span class="small">￥</span>1660
						</div>

					</div>
				</div>
				<a class="reserve">点击预定</a>
			</div>


		</div>


	</div>
	<!-- 实力摄像 -->
	<div class="camera">
		<span class="title">实力摄像</span>
		<p class="titlep">Camera Recommendation</p>
		<div class="camerawbk">
			<div class="lbk">
				<div class="groupl">
					<div class="bigvideo">
						<video src="../../assets/images/video.mp4"></video>
					</div>
					<div class="bigvideoinfor">
						<div class="peopleimg">
							<img src="../../assets/images/yuan.png" alt="" />
						</div>
						<div class="name2">蔓延摄像</div>
						<div class="classification2">
							<ul>
								<li>文艺</li>
								<li>记录</li>
								<li>电影感</li>
							</ul>
						</div>
						<div class="price"><span class="small">￥</span>1660</div>
						<a class="reserve">立即预定</a>
					</div>
				</div>
				<div class="groupr">
					<div class="smallvideoitem">
						<video src="../../assets/images/video.mp4"></video>
					</div>
					<div class="smallvideoitem">
						<video src="../../assets/images/video.mp4"></video>
					</div>
					<div class="smallvideoitem">
						<video src="../../assets/images/video.mp4"></video>
					</div>
				</div>
			</div>
			<div class="rbk">
				<div class="peopleitem">
					<div class="peopleimg">
						<img src="../../assets/images/yuan.png" alt="" />
					</div>
					<div class="name2">蔓延摄像</div>
					<div class="classification2">
						<ul>
							<li>文艺</li>
							<li>记录</li>
							<li>电影感</li>
						</ul>
					</div>
					<div class="price"><span class="small">￥</span>1660</div>
					<a class="reserve">立即预定</a>
				</div>
				<div class="peopleitem">
					<div class="peopleimg">
						<img src="../../assets/images/yuan.png" alt="" />
					</div>
					<div class="name2">蔓延摄像</div>
					<div class="classification2">
						<ul>
							<li>文艺</li>
							<li>记录</li>
							<li>电影感</li>
						</ul>
					</div>
					<div class="price"><span class="small">￥</span>1660</div>
					<a class="reserve">立即预定</a>
				</div>
				<div class="peopleitem">
					<div class="peopleimg">
						<img src="../../assets/images/yuan.png" alt="" />
					</div>
					<div class="name2">蔓延摄像</div>
					<div class="classification2">
						<ul>
							<li>文艺</li>
							<li>记录</li>
							<li>电影感</li>
						</ul>
					</div>
					<div class="price"><span class="small">￥</span>1660</div>
					<a class="reserve">立即预定</a>
				</div>
			</div>
		</div>

	</div>
	<!-- 主持人推荐 -->
	<div class="host">
		<span class="title">主持人推荐</span>
		<p class="titlep">Camera Recommendation</p>
		<div class="hostlist">
			<div class="hostitem">
				<div class="leftimg">
					<img src="../../assets/images/juxing2.png" alt="" />
				</div>
				<div class="rightinfor">
					<div class="topimg">
						<img src="../../assets/images/yuan.png" alt="" />
					</div>
					<div class="name2">蔓延摄像</div>
					<div class="classification2">
						<ul>
							<li>文艺</li>
							<li>记录</li>
							<li>电影感</li>
						</ul>
					</div>
					<div class="price"><span class="small">￥</span>1660</div>
					<div class="videolist">
						<div class="videobk">
							<video src="../../assets/images/video.mp4"></video>
							<video src="../../assets/images/video.mp4"></video>
							<video src="../../assets/images/video.mp4"></video>
						</div>
					</div>
					<div class="ydbtn">点击预定</div>
				</div>
			</div>
			<div class="hostitem">
				<div class="leftimg">
					<img src="../../assets/images/juxing2.png" alt="" />
				</div>
				<div class="rightinfor">
					<div class="topimg">
						<img src="../../assets/images/yuan.png" alt="" />
					</div>
					<div class="name2">蔓延摄像</div>
					<div class="classification2">
						<ul>
							<li>文艺</li>
							<li>记录</li>
							<li>电影感</li>
						</ul>
					</div>
					<div class="price"><span class="small">￥</span>1660</div>
					<div class="videolist">
						<div class="videobk">
							<video src="../../assets/images/video.mp4"></video>
							<video src="../../assets/images/video.mp4"></video>
							<video src="../../assets/images/video.mp4"></video>
						</div>
					</div>
					<div class="ydbtn">点击预定</div>
				</div>
			</div>
			<div class="hostitem">
				<div class="leftimg">
					<img src="../../assets/images/juxing2.png" alt="" />
				</div>
				<div class="rightinfor">
					<div class="topimg">
						<img src="../../assets/images/yuan.png" alt="" />
					</div>
					<div class="name2">蔓延摄像</div>
					<div class="classification2">
						<ul>
							<li>文艺</li>
							<li>记录</li>
							<li>电影感</li>
						</ul>
					</div>
					<div class="price"><span class="small">￥</span>1660</div>
					<div class="videolist">
						<div class="videobk">
							<video src="../../assets/images/video.mp4"></video>
							<video src="../../assets/images/video.mp4"></video>
							<video src="../../assets/images/video.mp4"></video>
						</div>
					</div>
					<div class="ydbtn">点击预定</div>
				</div>
			</div>
			<div class="hostitem">
				<div class="leftimg">
					<img src="../../assets/images/juxing2.png" alt="" />
				</div>
				<div class="rightinfor">
					<div class="topimg">
						<img src="../../assets/images/yuan.png" alt="" />
					</div>
					<div class="name2">蔓延摄像</div>
					<div class="classification2">
						<ul>
							<li>文艺</li>
							<li>记录</li>
							<li>电影感</li>
						</ul>
					</div>
					<div class="price"><span class="small">￥</span>1660</div>
					<div class="videolist">
						<div class="videobk">
							<video src="../../assets/images/video.mp4"></video>
							<video src="../../assets/images/video.mp4"></video>
							<video src="../../assets/images/video.mp4"></video>
						</div>
					</div>
					<div class="ydbtn">点击预定</div>
				</div>
			</div>
			<div class="hostitem">
				<div class="leftimg">
					<img src="../../assets/images/juxing2.png" alt="" />
				</div>
				<div class="rightinfor">
					<div class="topimg">
						<img src="../../assets/images/yuan.png" alt="" />
					</div>
					<div class="name2">蔓延摄像</div>
					<div class="classification2">
						<ul>
							<li>文艺</li>
							<li>记录</li>
							<li>电影感</li>
						</ul>
					</div>
					<div class="price"><span class="small">￥</span>1660</div>
					<div class="videolist">
						<div class="videobk">
							<video src="../../assets/images/video.mp4"></video>
							<video src="../../assets/images/video.mp4"></video>
							<video src="../../assets/images/video.mp4"></video>
						</div>
					</div>
					<div class="ydbtn">点击预定</div>
				</div>
			</div>
			<div class="hostitem">
				<div class="leftimg">
					<img src="../../assets/images/juxing2.png" alt="" />
				</div>
				<div class="rightinfor">
					<div class="topimg">
						<img src="../../assets/images/yuan.png" alt="" />
					</div>
					<div class="name2">蔓延摄像</div>
					<div class="classification2">
						<ul>
							<li>文艺</li>
							<li>记录</li>
							<li>电影感</li>
						</ul>
					</div>
					<div class="price"><span class="small">￥</span>1660</div>
					<div class="videolist">
						<div class="videobk">
							<video src="../../assets/images/video.mp4"></video>
							<video src="../../assets/images/video.mp4"></video>
							<video src="../../assets/images/video.mp4"></video>
						</div>
					</div>
					<div class="ydbtn">点击预定</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 化妆师推荐 -->
	<div class="Makeuprecommendations">
		<span class="title">化妆师推荐</span>
		<p class="titlep">Camera Recommendation</p>
		<div class="list">
			<div class="item">
				<div class="imgbox">
					<img src="../../assets/images/juxing.png" alt="" />
				</div>
				<div class="float1"></div>
				<div class="float2">
					<div class="infor_l">
						<div class="smallpic">
							<img src="../../assets/images/yuan.png" />
						</div>
						<div class="name">蔓延摄像</div>
						<div class="classification">
							<ul>
								<li>文艺</li>
								<li>记录</li>
								<li>电影感</li>
							</ul>
						</div>
					</div>
					<div class="infor_r">
						<div class="topbk">
							<span class="small">￥</span>1660
						</div>
						<div class="bottombk">点击预定</div>
					</div>

				</div>
			</div>
			<div class="item">
				<div class="imgbox">
					<img src="../../assets/images/juxing.png" alt="" />
				</div>
				<div class="float1"></div>
				<div class="float2">
					<div class="infor_l">
						<div class="smallpic">
							<img src="../../assets/images/yuan.png" />
						</div>
						<div class="name">蔓延摄像</div>
						<div class="classification">
							<ul>
								<li>文艺</li>
								<li>记录</li>
								<li>电影感</li>
							</ul>
						</div>
					</div>
					<div class="infor_r">
						<div class="topbk">
							<span class="small">￥</span>1660
						</div>
						<div class="bottombk">点击预定</div>
					</div>

				</div>
			</div>
			<div class="item">
				<div class="imgbox">
					<img src="../../assets/images/juxing.png" alt="" />
				</div>
				<div class="float1"></div>
				<div class="float2">
					<div class="infor_l">
						<div class="smallpic">
							<img src="../../assets/images/yuan.png" />
						</div>
						<div class="name">蔓延摄像</div>
						<div class="classification">
							<ul>
								<li>文艺</li>
								<li>记录</li>
								<li>电影感</li>
							</ul>
						</div>
					</div>
					<div class="infor_r">
						<div class="topbk">
							<span class="small">￥</span>1660
						</div>
						<div class="bottombk">点击预定</div>
					</div>

				</div>
			</div>
			<div class="item">
				<div class="imgbox">
					<img src="../../assets/images/juxing.png" alt="" />
				</div>
				<div class="float1"></div>
				<div class="float2">
					<div class="infor_l">
						<div class="smallpic">
							<img src="../../assets/images/yuan.png" />
						</div>
						<div class="name">蔓延摄像</div>
						<div class="classification">
							<ul>
								<li>文艺</li>
								<li>记录</li>
								<li>电影感</li>
							</ul>
						</div>
					</div>
					<div class="infor_r">
						<div class="topbk">
							<span class="small">￥</span>1660
						</div>
						<div class="bottombk">点击预定</div>
					</div>

				</div>
			</div>

		</div>
	</div>
	<Footer />
	
</template>
<script setup>
import {
	ref
} from 'vue'
import Banner from './banner.vue'
const value = ref('')

const options = [{
	value: 'Option1',
	label: 'Option1',
},
{
	value: 'Option2',
	label: 'Option2',
},
{
	value: 'Option3',
	label: 'Option3',
},
{
	value: 'Option4',
	label: 'Option4',
},
{
	value: 'Option5',
	label: 'Option5',
},
]
import HeadMenu from '../../views/headerMenu.vue'
import Footer from '../../views/footer.vue'


</script>
<style scoped lang="scss">
.item1 {
	margin-top: 64px;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.item1 .title {
	margin: auto;
	width: 144px;
	height: 44px;
	color: rgba(36, 36, 36, 1);
	font-family: FZFengYaSongS;
	font-size: 36px;
}

.item1>p {
	margin: auto;
	width: 133px;
	height: 20px;
	color: rgba(79, 79, 79, 1);
	font-family: FZFengYaSongS;
	font-size: 16px;
}

.item1 .item1_list {
	padding-top: 67px;
	margin: auto;
	width: 650px;
	height: 68px;
	display: flex;
	justify-content: center;
	align-items: start;

}

.item1 .item1_list ul {
	list-style: none;
	/* 去掉项目符号 */
	font-size: 22px;
	display: flex;
}

.item1 .item1_list li {
	margin-left: 23px;
	width: 260px;
	height: 68px;
	opacity: 1;
	color: rgba(254, 238, 212, 1);
	font-weight: 400;
}

.item2 {
	margin-top: 93px;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.item2 .title {
	margin: auto;
	width: 144px;
	height: 44px;
	color: rgba(36, 36, 36, 1);
	font-family: FZFengYaSongS;
	font-size: 36px;
}

.item2>p {
	margin: auto;
	height: 20px;
	color: rgba(79, 79, 79, 1);
	font-family: FZFengYaSongS;
	font-size: 16px;
}

.header-list {
	height: 100px;
}

.header {
	background: rgba(20, 20, 20, 0.8);
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	height: 100px;
	z-index: 999;
	padding: 8px 0px;
}

.header-top {
	/* width: 1920px; */
	height: 100px;
	margin: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;

}

.logo a {
	background: url(../images/logo.png) no-repeat center;
	width: 238px;
	height: 137px;
	left: 110px;
	opacity: 1;
	display: inline-block;
	background-size: contain;
}

.header-top ul {
	list-style: none;
	/* 去掉项目符号 */
	font-size: 22px;
	display: flex;
	margin-left: -457px;
}

.header-menu li {
	position: relative;
	opacity: 1;
	color: rgba(254, 238, 212, 1);
	margin: 0 33px;
	font-weight: 400;

}

.header-menu li span {
	font-size: 22px;
	color: rgba(254, 238, 212, 1);

}

.header-top ul li span:hover {
	color: rgba(250, 187, 88, 1);
}

.header-menu li::before {
	content: '';
	position: absolute;
	bottom: -20px;
	left: 50%;
	width: 0;
	height: 100px;
	border-bottom: 3px solid rgba(250, 187, 88, 1);
	transition: all 0.2s;
}

.header-menu li:hover::before {
	content: '';
	width: 100%;
	left: 0;
}

.header-right {
	display: flex;
}

.header-right-l button {
	top: 34.5px;
	width: 119px;
	height: 33px;
	opacity: 1;
	background: rgba(210, 148, 55, 1);
	border-radius: 30px;
	/* 可以根据需要调整圆角的大小 */
}




/*轮播图 */
.banner-list {

	max-width: 100%;
	width: 100%;
	height: 803px;
	margin: 0;

}

.banner-list .el-carousel__item>img {
	width: 100%;
	height: 803px;
	object-fit: cover;
}

.recommendlist {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	padding: 0 100px;
	margin-top: 98px;

	.reserve {
		display: block;
		color: rgba(255, 218, 158, 1);
		font-family: AlibabaPuHuiTi;
		font-size: 22px;
		width: 41.7%;
		border-radius: 37.5px;
		border: 1px solid rgba(210, 148, 55, 1);
		background: rgba(19, 21, 23, 1);
		text-align: center;
		margin: 0 auto;
		aspect-ratio: 1 / 0.334;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 60px;
	}

	.grid-item {
		border-radius: 4px;
		aspect-ratio: 1 / 1.294;
		position: relative;

		.imgbox {
			width: 100%;
			height: 100%;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.float1 {
			width: 100%;
			height: 139px;
			position: absolute;
			left: 0px;
			bottom: 0px;
			border-radius: 0px 0px 4px 4px;
			background: rgba(36, 36, 36, 0.77);
			z-index: 1;
		}

		.float2 {
			width: 100%;
			height: 139px;
			position: absolute;
			left: 0px;
			bottom: 0px;
			z-index: 2;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 30px;

			.infor_l {
				width: 80%;

				.smallpic {
					width: 54px;
					height: 54px;
					border: 1px solid rgba(250, 187, 88, 1);
					border-radius: 50%;
					margin-left: 78px;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.name {
					margin-left: 67px;
					color: rgba(255, 255, 255, 1);
					font-family: AlibabaPuHuiTi;
					font-weight: 500;
					font-size: 20px;
					line-height: 28px;
				}

				.classification {
					ul {
						display: flex;
						margin-left: 39px;

						li {
							color: rgba(163, 163, 163, 1);
							font-family: AlibabaPuHuiTi;
							font-size: 16px;
							line-height: 22px;

						}

						//伪类添加li之间的间隔
						li:not(:last-child)::after {
							content: '';
							height: 12px;
							width: 1px;
							background: rgba(140, 140, 140, 1);
							display: inline-block;
							margin: 0 10px;

						}

					}
				}
			}

			.infor_r {
				color: rgba(250, 187, 88, 1);
				font-family: FZFengYaSongS;
				font-size: 30px;

				.small {
					font-size: 15px;
				}
			}
		}


	}
}

.Makeuprecommendations {
	margin-top: 93px;
	width: 100%;
	display: flex;
	flex-direction: column;

	.title {
		margin: auto;

		height: 44px;
		color: rgb(36, 36, 36);
		font-family: FZFengYaSongS;
		font-size: 36px;

	}

	.titlep {
		margin: auto;
		height: 20px;
		color: rgb(79, 79, 79);
		font-family: FZFengYaSongS;
		font-size: 16px;
	}

	.list {
		padding: 0 100px;
		margin-top: 98px;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 24px;

		.item {
			aspect-ratio: 1 / 1.582;
			position: relative;

			.imgbox {
				width: 100%;
				height: 100%;

				img {
					width: 100%;
					height: 100%;
					border-radius: 4px;
				}
			}

			.float1 {
				width: 100%;
				height: 158px;
				background: rgba(0, 0, 0, 0.51);
				position: absolute;
				left: 0px;
				bottom: 0;
				z-index: 1;
			}

			.float2 {
				width: 100%;
				height: 158px;
				display: flex;
				align-items: center;
				position: absolute;
				left: 0px;
				bottom: 0;
				z-index: 2;
				justify-content: space-between;
				padding-right: 35px;

				.infor_l {


					.smallpic {
						width: 54px;
						height: 54px;
						border: 1px solid rgba(250, 187, 88, 1);
						border-radius: 50%;
						margin-left: 59px;

						img {
							width: 100%;
							height: 100%;
						}
					}

					.name {
						margin-left: 57px;
						color: rgba(255, 255, 255, 1);
						font-family: AlibabaPuHuiTi;
						font-weight: 500;
						font-size: 20px;
						line-height: 28px;
					}

					.classification {
						ul {
							display: flex;
							margin-left: 29px;

							li {
								color: rgba(163, 163, 163, 1);
								font-family: AlibabaPuHuiTi;
								font-size: 16px;
								line-height: 22px;

							}

							//伪类添加li之间的间隔
							li:not(:last-child)::after {
								content: '';
								height: 12px;
								width: 1px;
								background: rgba(140, 140, 140, 1);
								display: inline-block;
								margin: 0 10px;

							}

						}
					}
				}

				.infor_r {
					color: rgba(250, 187, 88, 1);
					font-family: FZFengYaSongS;
					font-size: 14px;
					line-height: 17px;
					padding-top: 47px;

					.topbk {
						.small {
							font-size: 15px;
						}

						color: rgb(250, 187, 88);
						font-family: FZFengYaSongS;
						font-size: 30px;
					}

					.bottombk {
						width: 90px;
						height: 30px;
						border-radius: 37.5px;
						border: 1px solid rgba(250, 187, 88, 1);
						background: rgba(19, 21, 23, 1);
						text-align: center;
						line-height: 27px;
						margin-top: 10px;
						cursor: pointer;
					}
				}

			}

		}
	}
}

.host {
	margin-top: 93px;
	width: 100%;
	display: flex;
	flex-direction: column;

	.title {
		margin: auto;
		height: 44px;
		color: rgb(36, 36, 36);
		font-family: FZFengYaSongS;
		font-size: 36px;
	}

	.titlep {
		margin: auto;
		height: 20px;
		color: rgb(79, 79, 79);
		font-family: FZFengYaSongS;
		font-size: 16px;
	}

	.hostlist {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
		padding: 0 100px;
		margin-top: 98px;

		.hostitem {
			aspect-ratio: 1 / 0.68888;
			display: flex;
			background: #f5f5f5;

			.leftimg {
				width: 34.3%;
				height: 100%;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.rightinfor {
				width: 65.7%;
				height: 100%;
				padding-left: 34px;
				padding-top: 30px;

				.topimg {
					width: 74px;
					height: 74px;
					border: 1px solid rgba(0, 0, 0, 1);
					border-radius: 50%;

					img {
						width: 100%;
						height: 100%;

					}
				}

				.name2 {
					color: rgb(36, 36, 36);
					font-family: AlibabaPuHuiTi;
					font-weight: 500;
					font-size: 20px;
					line-height: 28px;
					margin-top: 16px;
				}

				.classification2 {
					ul {
						display: flex;

						li {
							color: rgba(140, 140, 140, 1);
							font-family: AlibabaPuHuiTi;
							font-size: 16px;
							line-height: 22px;

						}

						//伪类添加li之间的间隔
						li:not(:last-child)::after {
							content: '';
							height: 12px;
							width: 1px;
							background: rgba(140, 140, 140, 1);
							display: inline-block;
							margin: 0 10px;

						}

					}
				}

				.price {
					margin-top: 38px;
					color: rgba(36, 36, 36, 1);
					font-family: FZFengYaSongS;
					font-size: 30px;
					line-height: 36px;

					.small {
						font-size: 15px;
					}
				}

				.videolist {
					display: flex;
					padding-right: 30px;

					.videobk {
						width: 33.3%;
						margin-right: 7px;
						aspect-ratio: 1 / 0.6197;
						border-radius: 4px;
						display: flex;

						video {
							width: 100%;
							height: 100%;
							background-color: black;
							border-radius: 4px;
							margin-right: 10px;
						}

					}
				}

				.ydbtn {
					color: rgba(250, 187, 88, 1);
					font-family: AlibabaPuHuiTi;
					font-size: 22px;
					width: 142px;
					height: 51px;
					border-radius: 37.5px;
					border: 1px solid rgba(210, 148, 55, 1);
					background: rgba(19, 21, 23, 1);
					text-align: center;
					line-height: 45px;
					margin-top: 51px;
					cursor: pointer;
				}
			}
		}
	}
}

.camera {
	margin-top: 93px;
	width: 100%;
	display: flex;
	flex-direction: column;
	padding: 0 190px;

	.title {
		margin: auto;
		height: 44px;
		color: rgb(36, 36, 36);
		font-family: FZFengYaSongS;
		font-size: 36px;
	}

	.titlep {
		margin: auto;
		height: 20px;
		color: rgb(79, 79, 79);
		font-family: FZFengYaSongS;
	}

	.camerawbk {
		width: 100%;
		aspect-ratio: 1 / 0.58577;
		display: flex;

		margin-top: 98px;

		.lbk {
			width: 82.90%;
			height: 100%;

			display: flex;
			justify-content: space-between;

			.groupl {
				width: 65.251%;
				height: 100%;

				display: flex;
				flex-direction: column;

				.bigvideo {
					width: 100%;
					aspect-ratio: 1 / 0.64535;
					background-color: #f5f5f5;

					video {
						width: 100%;
						height: 100%;
						background-color: black;
						border-radius: 4px;
					}

				}

				.bigvideoinfor {
					width: 100%;
					flex: 1;
					background-color: #f5f5f5;
					padding-top: 40px;

					.peopleimg {
						margin: 0 auto;
						width: 74px;
						height: 74px;
						border-radius: 50%;
						border: 1px solid rgba(0, 0, 0, 1);

						img {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}

					.name2 {
						color: rgb(36, 36, 36);
						font-family: AlibabaPuHuiTi;
						font-weight: 500;
						font-size: 20px;
						line-height: 28px;
						margin-top: 6px;
						text-align: center;


					}

					.classification2 {
						ul {
							display: flex;
							justify-content: center;

							li {
								color: rgba(140, 140, 140, 1);
								font-family: AlibabaPuHuiTi;
								font-size: 16px;
								line-height: 22px;

							}

							//伪类添加li之间的间隔
							li:not(:last-child)::after {
								content: '';
								height: 12px;
								width: 1px;
								background: rgba(140, 140, 140, 1);
								display: inline-block;
								margin: 0 10px;

							}

						}
					}

					.price {
						margin-top: 10px;
						color: rgba(36, 36, 36, 1);
						font-family: FZFengYaSongS;
						font-size: 30px;
						line-height: 36px;
						display: flex;
						justify-content: center;

						.small {
							font-size: 15px;
						}
					}

					.reserve {
						display: block;
						color: rgba(255, 218, 158, 1);
						font-family: AlibabaPuHuiTi;
						font-size: 22px;
						width: 142px;
						height: 51px;
						border-radius: 37.5px;
						border: 1px solid rgba(210, 148, 55, 1);
						background: rgba(19, 21, 23, 1);
						text-align: center;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-top: 0px;
						margin: 0 auto;
						cursor: pointer;

					}

				}
			}

			.groupr {
				width: 33.622%;
				height: 100%;

				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.smallvideoitem {
					width: 100%;
					aspect-ratio: 1 / 0.58577;
					background-color: #f5f5f5;

					video {
						width: 100%;
						height: 100%;
						background-color: black;
						border-radius: 4px;
					}
				}
			}
		}

		.rbk {
			width: 17.09%;
			height: 100%;
			padding-left: 30px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.peopleitem {
				.peopleimg {
					width: 74px;
					height: 74px;
					border-radius: 50%;
					border: 1px solid rgba(0, 0, 0, 1);

					img {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.name2 {
					color: rgb(36, 36, 36);
					font-family: AlibabaPuHuiTi;
					font-weight: 500;
					font-size: 20px;
					line-height: 28px;
					margin-top: 6px;
				}

				.classification2 {
					ul {
						display: flex;

						li {
							color: rgba(140, 140, 140, 1);
							font-family: AlibabaPuHuiTi;
							font-size: 16px;
							line-height: 22px;

						}

						//伪类添加li之间的间隔
						li:not(:last-child)::after {
							content: '';
							height: 12px;
							width: 1px;
							background: rgba(140, 140, 140, 1);
							display: inline-block;
							margin: 0 10px;

						}

					}
				}

				.price {
					margin-top: 10px;
					color: rgba(36, 36, 36, 1);
					font-family: FZFengYaSongS;
					font-size: 30px;
					line-height: 36px;

					.small {
						font-size: 15px;
					}
				}

				.reserve {
					display: block;
					color: rgba(255, 218, 158, 1);
					font-family: AlibabaPuHuiTi;
					font-size: 22px;
					width: 142px;
					height: 51px;
					border-radius: 37.5px;
					border: 1px solid rgba(210, 148, 55, 1);
					background: rgba(19, 21, 23, 1);
					text-align: center;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 0px;
					cursor: pointer;
				}
			}


		}

	}

}

::v-deep .el-select__wrapper {
	border: 2px solid rgba(143, 143, 143, 1);
	height: 68px;
	font-size: 22px;
}

.btn2 {
	width: 70px;
	height: 70px;
	background: url('../../assets/images/btn2.png') no-repeat center;
	border: none;


}

</style>